<template>
  <el-container>
    <el-header class="pdbt rigtop">
          <i class="fa el-icon-s-unfold" @click="clickFold" v-if="iconIf"></i> 
          <i class="fa el-icon-s-fold" @click="clickFold" v-if="!iconIf"></i>
          审核公式信息
        </el-header>
      <!-- <el-header class="height_auto pdbt" style="text-align: center">区域内审核公式信息</el-header> -->

        <el-main class="padding_top heiauto">
          <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="90px"
            label-position="right">
            <el-form-item label="公式类型" prop="field102" size="mini">
              <el-radio-group v-model="formData.field102" >
                <el-radio v-for="(item, index) in field102Options" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="有效性" prop="field103" size="mini">
              <el-radio-group v-model="formData.field103" >
                <el-radio v-for="(item, index) in field103Options" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="选择区域" prop="field197" size="mini">
              <el-select v-model="formData.field197"  placeholder="请择选选择区域" clearable :style="{width: '100%'}">
                <el-option v-for="(item, index) in field197Options" :key="index" :label="item.areaCd"
                  :value="item.areaCd" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="校验类型" prop="field198" size="mini">
              <el-radio-group v-model="formData.field198"  @change="agreeChange">
                <el-radio v-for="(item, index) in field198Options" :key="index" :label="item.value"
                  :disabled="item.disabled">{{item.label}}</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="有效范围" prop="field199" size="mini">
              <el-select v-model="formData.field199" placeholder="请选择有效范围" clearable multiple collapse-tags @change='changeSelect' :style="{width: '100%'}">
                <el-checkbox v-model="checked" @change='selectAll'>全选</el-checkbox>
                <el-divider direction="horizontal" class="elCheckbox" ></el-divider>
                <el-option v-for="(item, index) in field199Options" :key="index" :label="item.lable"
                  :value="item.value" :disabled="item.disabled"></el-option>
              </el-select>
            </el-form-item>
            <el-row type="flex" justify="start" align="bottom" class="el_row_btn">
              <el-form-item label-width="5px" label="" prop="field159">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="czfClick(' + ')"></el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field158">
                <el-button type="primary" icon="el-icon-minus" size="mini" @click="czfClick(' - ')"></el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field156">
                <el-button type="primary" icon="el-icon-close" size="mini" @click="czfClick(' * ')"></el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field164">
                <el-button type="primary" size="mini" @click="czfClick(' / ')">÷</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field165">
                <el-button type="primary" size="mini" @click="czfClick(' ( ')">（</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field166">
                <el-button type="primary" size="mini" @click="czfClick(' ) ')">）</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field167">
                <el-button type="primary" size="mini" @click="czfClick(' { ')">{</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field168">
                <el-button type="primary" size="mini" @click="czfClick(' } ')">}</el-button>
              </el-form-item>
            </el-row>
            <el-row type="flex" justify="start" align="bottom" class="el_row_btn">
              <el-form-item label-width="5px" label="" prop="field170">
                <el-button type="primary" size="mini" @click="czfClick(' && ')">&</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field171">
                <el-button type="primary" size="mini" @click="czfClick(' || ')">||</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field172">
                <el-button type="primary" size="mini" @click="czfClick(' > ')">></el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field173">
                <el-button type="primary" size="mini" @click="czfClick(' >= ')">>=</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field174">
                <el-button type="primary" size="mini" @click="czfClick(' == ')">==</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field175">
                <el-button type="primary" size="mini" @click="czfClick(' < ')"><</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field176">
                <el-button type="primary" size="mini" @click="czfClick(' <= ')"><=</el-button>
              </el-form-item>
              <el-form-item label-width="5px" label="" prop="field177">
                <el-button type="primary" size="mini" @click="czfClick(' != ')">!=</el-button>
              </el-form-item>
            </el-row>
            <el-form-item label-width="1px" label="" prop="field178">
                <el-input ref="m_input" v-model="inputOne" type="textarea" placeholder="请输入表内审核公式······"
                :autosize="{minRows: 10, maxRows: 1000}" :style="{width: '100%'}"></el-input>
            </el-form-item>
            <el-form-item label-width="1px" label="" prop="field179">
                <el-input ref="n_input" v-model="inputTwo" type="textarea" placeholder="请输入审核解释······"
                :autosize="{minRows: 7, maxRows: 1000}" :style="{width: '100%'}"></el-input>
            </el-form-item>
          </el-form>
        </el-main>
        <el-footer style="text-align: center;">
              <el-button size="mini" type="primary" @click="submitForm">保存</el-button>
              <!-- <el-button size="small" @click="clearForm">重置</el-button> -->
        </el-footer>
      </el-container>
</template>
<script>
  import request from "@/utils/requestutil";
  import {getRealUrl, syncRequest} from "@/utils/httpRequet";
  import $ from "jquery";
  import treeExhide from "@/components/ztree/lib/jquery.ztree.exhide.min.js";
  import dicPanel from '@/hr/utils/dicPanel'
  import { options } from 'runjs';
  import psTree from '@/components/psTree/psTree';
  import { isNull } from 'xe-utils/methods';
  import functionSelector from '@/components/FunctionSelector/FunctionSelector'
export default {
  components: {},
  props: [],
  data() {
    return {
      iconIf: false,
      //bzcode:bzcode,ttId:ttId,tsId:tsId
      bzcode:"",
      ttId:"",
      tsId:"",
      status:"add",//默认为添加
      inputOne:"",
      inputTwo:"",
      proofid:"",
      checked:false,
      selectedArray: [],
      formData: {
        field102: "MC",
        field103: "1",
        field198: "COL",
        field199:[],
        field197:"",
      },
      rules: {
        field102: [],
        field103: [],
        field197: [{
          required: true,
          message: '请择选选择区域',
          trigger: 'change'
        }],
        field198: [],
        field199: [{
          required: true,
          message: '请选择有效范围',
          trigger: 'change'
        }],
        field178: "",
        field179: "",
      },
      field102Options: [{
        "label": "合理性",
        "value": "RC"
      }, {
        "label": "强制性",
        "value": "MC"
      }],
      field103Options: [{
        "label": "有效",
        "value": "1"
      }, {
        "label": "无效",
        "value": "0"
      }],
      field197Options: [],
      field198Options: [{
        "label": "行校验",
        "value": "ROW"
      }, {
        "label": "列校验",
        "value": "COL"
      }],
      field199Options: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    clickFold() {
      // this.isFold = !this.isFold
      if(this.isFold==='1'){
        this.isFold = '0'
        this.iconIf = false
      }else{
        this.isFold = '1'
        this.iconIf = true
      }
      this.isFoldz = this.isFold
      this.$emit('myclickFoldQY', this.isFoldz)
    },
    submitForm() {
      // this.$refs['elForm'].validate(valid => {
      //   if (!valid) return
      //   // TODO 提交表单
      // })
      //获取填写或者输入的值
      let ft = this.formData.field102;
      let fValid = this.formData.field103;
      let areaCd = this.formData.field197;
      let fd = this.formData.field198;
      let rang = this.formData.field199;
      let formula = this.$refs.m_input.$refs.textarea.value;
      let fDesc = this.$refs.n_input.$refs.textarea.value;
      let strRang = "";
      if(areaCd == "" || isNull(areaCd) || areaCd == undefined){
        this.$message.warning("请选择区域！");
        return false;
      }
      if(rang.length == 0){
        this.$message.warning("请选择有效范围！");
        return false;
      }
      if(formula == "" || isNull(formula) || formula == undefined){
        this.$message.warning("请填写审核公式！");
        return false;
      }
      if(fDesc == "" || isNull(fDesc) || fDesc == undefined){
        this.$message.warning("请填写公式说明！");
        return false;
      }
      for(var i = 0;i<rang.length;i++){
        strRang+=rang[i]+",";
      }
      rang=strRang.substring(0,strRang.length-1);
      request({
        url:"bnshQYSave",
        method:"post",
        params:{bzcode:this.bzcode,ttId:this.ttId,tsId:this.tsId,ft:ft,fValid:fValid,areaCd:areaCd,fd:fd,rang:rang,formula:formula,fDesc:fDesc,status:this.status,proofid:this.proofid}
      }).then((data)=>{
        this.$emit("qygridrefh",this.bzcode,this.ttId,this.tsId);
        if(data.data.success){
          if(this.status == "add"){
            this.$message.success("新增成功！");
          }else{
            this.$message.success("修改成功！");
          }
        }else{
          if(this.status == "add"){
            this.$message.error("新增失败！");
          }else{
            this.$message.error("修改失败！");
          }
        }
      })
    },
    clearForm(){
      this.$refs['elForm'].resetFields();
      this.$refs.m_input.$refs.textarea.value = "";
      this.$refs.n_input.$refs.textarea.value = "";
    },
    resetForm() {
      this.status="add";
      this.$refs['elForm'].resetFields();
      this.$refs.m_input.$refs.textarea.value = "";
      this.$refs.n_input.$refs.textarea.value = "";
    },
    agreeChange(){
      this.$emit("jylxRadio", this.formData.field198);
      this.getYXFWData(this.formData.field198);
      this.formData.field199=[];
    },
    //加载选择区域
    getQyData(bzcode,ttId,tsId){
      this.bzcode=bzcode;
      this.ttId=ttId;
      this.tsId=tsId;
      request({
        url:"dygQYData",
        method:"post",
        params:{bzcode:bzcode,ttId:ttId,tsId:tsId}
      }).then((data) => {
        this.field197Options = data.data
      })
    },
    //加载有效范围
    getYXFWData(clsAD){
      let _t = this;
      let tsUn = _t.$store.state.user.userInfo.deptId
      if("ROW" == clsAD){
        clsAD = "H";//行
      }else{
        clsAD = "V"//列
      }
       request({
        url:"getYXFWData",
        method:"post",
        params:{bzcode:_t.bzcode,ttId:_t.ttId,tsId:_t.tsId,clsAD:clsAD,tsUn:tsUn}
      }).then((data)=>{
        let strData = eval(data.data);
        // let strs= new Array(); //定义一数组 
        // strs=strData.split(","); //字符分割 
        // console.log(strs);      
        _t.field199Options=strData
        _t.field199 = [strData[0].value];
      })
    },
    setData(strNum){//用户列表点击一列赋值使用(先清空再赋值)
      if(strNum.type == "update")
      {
        this.status="update";
        this.proofid=strNum.val.proofid;
        this.formData.field102=strNum.val.ft;
        this.formData.field103=strNum.val.fValid;
        this.formData.field197=strNum.val.areaCd;
        this.formData.field198=strNum.val.fd;
        let strs= new Array(); //定义一数组 
        strs=strNum.val.rang.split(","); //字符分割 
        this.formData.field199=strs;
        this.inputOne = strNum.val.formula;
        this.inputTwo = strNum.val.fDesc;
      }else{
        this.status = "add";
      }
    },
    //操作审核公式和公式解释
    czfClick(strNum){//用于追加或插入计算符号或要审核字段名称
      const myField = this.$refs.m_input.$refs.textarea;
      if (myField.selectionStart || myField.selectionStart === 0) {
        let startPos = myField.selectionStart;
        let endPos = myField.selectionEnd;
        myField.value = myField.value.substring(0, startPos) + strNum + myField.value.substring(endPos, myField.value.length);
        myField.focus();
        myField.selectionStart = startPos + strNum.length;
        myField.selectionEnd = startPos + strNum.length;
      } else {
        this.inputOne += strNum
      }
    },
    selectAll() {
      this.formData.field199 = []
      if (this.checked) {
        this.field199Options.map((item) => {
          this.formData.field199.push(item.value)
        })
      } else {
        this.formData.field199 = []
      }
    },
    changeSelect(val) {
      if (val.length === this.field199Options.length) {
        this.checked = true
      } else {
        this.checked = false
      }
    },
    setIsFold(){
      this.isFold = '1'
      this.iconIf = true
      this.isFoldz = this.isFold
      this.$emit('myclickFoldQY', this.isFoldz)
    },
  }
}

</script>
<style lang="scss" scoped>
.padding_top .el-form{
  padding: 0 10px;
}
.padding_top{
     max-height: calc(100% - 80px);
    overflow: auto;
}

.el_row_btn .el-button--mini{
  padding:4px 6px;
  width:100%;
}
.padding_top .el_row_btn .el-form-item{
  margin-bottom: 0px;
  flex: 1;
  margin-top:0;
}
.padding_top .el-form-item{
  margin-top: 6px;
  margin-bottom: 6px;
}
.padding_top .el-textarea{
  margin-top: 8px;
  margin-bottom: 8px;
}
::v-deep .el-form-item--medium .el-form-item__label{
  text-align: right;
}
::v-deep .padding_top .el-form-item--medium .el-form-item__content{
  line-height: 30px;  text-align: left;
}
.el-checkbox {
    text-align: right;
    width: 100%;
    padding-right: 10px;
  }
  .elCheckbox{
    margin:0px;
  }
</style>
